<template>
    <a-card style="width: 80%;">
        <br>
        <div class="card_head">供应商入驻公告</div>
        <br>
        <a-card style="width: 60%; left: 20%; max-height: 200px; overflow-y: auto;">
            content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content
        </a-card>
        <br>
        <a-flex justify="center">
            <a-checkbox v-model:checked="checked" style="color: orange;">已阅读</a-checkbox>
        </a-flex>
    </a-card>
    <a-card style="width: 80%;">
        <br>
        <div class="card_head">供应商入驻申请</div>
        <br>
        <a-flex :justify="'center'">
            <a-form :model="data"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
                style="width: 80%;"
            >
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item
                            name="companyName"
                            label="公司名称"
                            :rules="[{ required: true, message: '请输入公司名称!' }]"
                        >
                            <a-input v-model:value="data.companyName" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="legalRepresentative"
                            label="法定代表人"
                            :rules="[{ required: true, message: '请输入法定代表人!' }]"
                        >
                            <a-input v-model:value="data.legalRepresentative" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="creditCode"
                            label="统一社会信用代码"
                            :rules="[{ required: true, message: '请输入统一社会信用代码!' }]"
                        >
                            <a-input v-model:value="data.creditCode" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="registeredCapital"
                            label="注册资金(万元)"
                            :rules="[{ required: true, message: '请输入注册资金(万元)称!' }]"
                        >
                            <a-input v-model:value="data.registeredCapital" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="registeredAddress"
                            label="注册地址"
                            :rules="[{ required: true, message: '请输入注册地址!' }]"
                        >
                            <a-input v-model:value="data.registeredAddress" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="establishmentDate"
                            label="成立日期"
                            :rules="[{ required: true, message: '请输入成立日期!' }]"
                        >
                            <a-date-picker v-model:value="data.establishmentDate"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="contactAddress"
                            label="联系地址"
                            :rules="[{ required: true, message: '请输入联系地址!' }]"
                        >
                            <a-input v-model:value="data.contactAddress" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="brandName"
                            label="拟入驻品牌名称"
                            :rules="[{ required: true, message: '请输入拟入驻品牌名称!' }]"
                        >
                            <a-input v-model:value="data.brandName" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="performance"
                            label="近三年业绩"
                        >
                            <a-input v-model:value="data.performance" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="email"
                            label="邮箱"
                        >
                            <a-input v-model:value="data.email" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="companyWebsite"
                            label="公司网址"
                        >
                            <a-input v-model:value="data.companyWebsite" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            name="companyIntroduction"
                            label="公司简介"
                        >
                            <a-input v-model:value="data.companyIntroduction" placeholder="请输入内容"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            name="attachment"
                            label="上传附件"
                            :rules="[{ required: true, message: '请上传附件!' }]"
                        >
                            <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
                                <a-button>
                                    <upload-outlined></upload-outlined>
                                    上传
                                </a-button>
                                （请上传入驻资料并加盖公章）
                                <a-button style="background-color:skyblue; color:white" @click="download()">
                                    下载附件
                                </a-button>
                            </a-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-flex :justify="'center'">
                            <a-form-item>
                                <a-button type="primary" html-type="submit" style="background-color: orange">提交申请</a-button>
                            </a-form-item>
                        </a-flex>
                    </a-col>
                </a-row>
            </a-form>
        </a-flex>
    </a-card>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import dayjs, { Dayjs } from 'dayjs';
    interface companyData{
        companyName:string,    //公司名称
        legalRepresentative:string,    //法定代表人
        creditCode:string,    //统一社会信用代码
        registeredCapital:number,    //注册资金(万元)
        registeredAddress:string,    //注册地址
        establishmentDate:Dayjs,    //成立日期
        contactAddress:string,    //联系地址
        brandName:string,    //拟入驻品牌名称
        performance:string,    //近三年业绩
        email:string,    //邮箱
        companyWebsite:string,    //公司网址
        companyIntroduction:string,    //公司简介
    }
    let data = ref({    //各输入框对应的值
        companyName:'',
        legalRepresentative:'',
        creditCode:'',
        registeredCapital:0,
        registeredAddress:'',
        establishmentDate:'',
        contactAddress:'',
        brandName:'',
        performance:'',
        email:'',
        companyWebsite:'',
        companyIntroduction:'',
        attachment:''      //附件，interface里没有对应的是因为我不知道附件算什么类型
    })
    let checked = false    //用于检测是否已阅读供应商入驻公告

    import { UploadOutlined } from '@ant-design/icons-vue';
    import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
    const fileList = ref<UploadProps['fileList']>([    //用于存储上传的附件，下面为示例
        {
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'http://www.baidu.com/xxx.png',
        },
    ]);
    const handleChange = (info: UploadChangeParam) => {
        let resFileList = [...info.fileList];
        resFileList = resFileList.slice(-2);
        resFileList = resFileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        fileList.value = resFileList;
    };
    const onFinish = (values: any) => {    //点击提交按钮，表单填写成功时的函数
        submit()
    }
    const onFinishFailed = (values: any) => {    //点击提交按钮，表单填写失败时的函数
        
    }
    function download(){    //下载公章

    }
    function submit(){    //提交时运行的函数
        if(checked == false){
            alert("请阅读供应商入驻公告，并勾选已阅读按钮!")
            return
        }
        else{
            
        }
    }
</script>

<style scoped>
    .card_head{
        width: 80%;
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: rgb(0, 0, 0);
        text-indent: 20px;
        border-left-style: solid;
        border-left-width: 10px;
        border-left-color: rgb(255, 100, 0);
        border-radius: 5px;
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
    }
    .platforms {
        margin: 0 auto;
        width: 90%;
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: space-between; /* 两行元素等间距 */
    }
    .platform{
        width: calc(50%); /* 每行两个元素，减去间距 */
        box-sizing: border-box;
    }
    .platform div{
        float: right;
        font-weight: bold;
        font-size: 19px;
        padding: 20px;
    }
    .platform div span{
        color: orange;
    }
    .platform input{
        width: 250px;
    }
    .platform2{
        width: calc(62%);
        box-sizing: border-box;
    }
    .platform2 div{
        float: right;
        font-weight: bold;
        font-size: 19px;
        padding: 20px;
    }
    .platform2 div span{
        color: orange;
    }
    a-input{
        width: 250px;
    }
</style>